<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta charset="utf-8"></meta>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
        <title>DISUTRAN S.A</title>       
    </h:head>
    <h:body>
        <style type="text/css">
            tr.spaceUnder > td
            {
                padding-bottom: 1em;
                padding-top: 1em;
            }
        </style>

        <center>            
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><img src="#{request.contextPath}/img/logo.png" width="438" height="312"  alt=""/></p>                        
        </center>            
        <h:form id="frmLogin" styleClass="login">
            <p:dialog id="dgCambio" draggable="false" visible="true" modal="true" header="Cambiar la contraseña" 
                      resizable="false" closable="false" closeOnEscape="false" height="600" width="700" position="center" style="font-size: small">
                <p:ajax onstart="setSize();"/>
                <table align="center" width="100%" >
                    <tr class="spaceUnder">
                        <th align="right" scope="row">
                            <h:outputLabel for="txtViejaContrasena">Antigua contraseña:</h:outputLabel>
                        </th>
                        <td>
                            <p:password id="txtViejaContrasena" value="#{usuarioController.selected.contrasena}"
                                        required="true" requiredMessage="#{usuarioLabels.CampoContrasenaAntigua}"
                                        placeholder="Por favor ingrese su antigua contraseña"
                                        style="width: 400px"/>
                            <p:message for="txtViejaContrasena"/>
                        </td>
                    </tr>
                    <tr class="spaceUnder">
                        <th align="right" scope="row">
                            <h:outputLabel for="txtNuevaContrasena">Nueva contraseña:</h:outputLabel>
                        </th>
                        <td>
                            <p:password id="txtNuevaContrasena" value="#{usuarioController.selected.nuevacontrasena}"
                                        required="true" requiredMessage="#{usuarioLabels.CampoContrasenaNueva}"
                                        validatorMessage="Las contraseñas no coinciden" feedback="true"
                                        promptLabel="Por favor ingrese su nueva contraseña"
                                        placeholder="Por favor ingrese su nueva contraseña"
                                        match="txtConfirmarContrasena" weakLabel="Débil" goodLabel="Media" strongLabel="Buena"
                                        style="width: 400px"/>
                            <p:message for="txtNuevaContrasena"/>
                        </td>
                    </tr>
                    <tr class="spaceUnder">
                        <th align="right" scope="row">
                            <h:outputLabel for="txtConfirmarContrasena">Confirmar contraseña:</h:outputLabel>
                        </th>
                        <td>
                            <p:password id="txtConfirmarContrasena" value="#{usuarioController.selected.nuevacontrasena}"
                                        required="true" requiredMessage="#{usuarioLabels.CampoContrasenaConfirmar}"
                                        placeholder="Por favor confirme su nueva contraseña"
                                        style="width: 400px"/>
                            <p:message for="txtConfirmarContrasena"/>
                        </td>
                    </tr>
                </table>
                <br/>
                <table>
                    <tr>
                        <td>
                            <p:commandButton value="Cambiar contraseña" ajax="false" 
                                             action="#{usuarioController.cambiarContrasena()}"/>
                        </td>
                        <td>
                            <p:commandButton value="Volver al inicio" ajax="false" 
                                             action="/index.xhtml" rendered="#{!usuarioController.getNuevoUsuario()}"
                                             immediate="true"/> 
                        </td>
                    </tr>
                </table>
            </p:dialog>


        </h:form>

    </h:body>

    <script type="text/javascript">
        function setSize() {
            $(".ui-dialog").css({
                "width": 700,
                "height": 600,
                "left": "50%",
                "top": "50%",
                "margin-left": -150,
                "margin-top": -100
            });
        }
    </script>
</html>

